<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="ha-top">
          <span>行政区划：</span>
          <el-select v-model="selectFormModel.areaCode" clearable
                     style="margin-right: 10px;" size="mini" @change="onSearch">
            <el-option
                v-for="item in subAreaList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
          </el-select>

          <span>数据类型：</span>
          <el-select v-model="selectFormModel.categoryId" clearable
                     style="margin-right: 10px;" size="mini" @change="onSearch">
            <el-option
                v-for="item in minCategoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-button style="margin-left: auto;" size="small" @click="dialogFormVisible = true" :disabled="!addTag" plain
                     type="primary">增加
          </el-button>
        </div>
        <el-dialog title="填写对象遗漏数据" width="40" custom-class="child-dialog"
                   append-to-body :visible.sync="dialogFormVisible">
          <el-form :model="missFormModel" :rules="rules" ref="missFormRef">
            <el-form-item label="行政区划：" prop="areaCode">
              <el-select v-model="missFormModel.areaCode" clearable
                         style="margin-right: 10px;" size="small" @change="onSearch">
                <el-option
                    v-for="item in subAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型：" prop="categoryId">
              <el-select v-model="missFormModel.categoryId" clearable
                         style="margin-right: 10px;" size="small" @change="onSearch">
                <el-option
                    v-for="item in minCategoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称：" prop="departName">
              <el-input v-model="missFormModel.departName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="地址：">
              <el-input v-model="missFormModel.departAddr" size="small"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveMissData" :loading="loading">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <data-table
          :api="selectReplenishDataList"
          ref="dataTable"
          :options="options"
          :columns="columns"
          :operates="operates"
          :query="selectFormModel"
      ></data-table>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Ref, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import {
  selectReplenishDataList,
  saveReplenishData
} from '@/api/verifyJudgeMark';
import {getMinCategory} from '@/api/investCategory';

import {queryUserSubArea} from "@/api/area";
import {Message} from "element-ui";

@Component({
  methods: {selectReplenishDataList},
  components: {DataTable}
})
export default class JudgeMarkReplenish extends Vue {
  dialogFormVisible = false;
  loading = false;
  @Prop() workId!: any;
  @Prop() verifyTimes!: any;
  @Prop() addTag!: boolean;
  @Ref('dataTable') private dataTable: any;
  @Ref('missFormRef') private missFormRef: any;
  subAreaList: any = [];
  minCategoryList: any = [];
  missFormModel: any = {
    workId: 15,
    verifyTimes: 2,
    areaCode: '',
    categoryId: '',
    departName: '',
    departAddr: ''
  };
  rules: any = {
    areaCode: [
      {required: true, message: '请选择行政区划', trigger: 'change'}
    ],
    categoryId: [
      {required: true, message: '请选择数据类型', trigger: 'change'}
    ],
    departName: [
      {required: true, message: '请输入名称', trigger: 'blur'}
    ]
  };

  selectFormModel: any = {
    workId: 15,
    verifyTimes: 2,
    areaCode: undefined,
    categoryId: undefined,
  };
  // table 的参数
  options: any = {
    index: true,
    page: true,
    align: 'center',
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };
  columns: any = [
    {label: '区县', prop: 'countyName', align: 'center', width: 200},
    {label: '类型', prop: 'categoryName', align: 'center', width: 100},
    {label: '名称', prop: 'departName', align: 'center', width: 250},
    {label: '地址', prop: 'departAddr', align: 'center', width: 250}
  ];
  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '删除',
        type: 'text',
        icon: 'el-icon-delete',
        plain: true,
        disabled: (index: any, row: any) => {
          return true;
        }
      }
    ]
  };

  //保存
  saveMissData() {
    this.loading = true;
    this.missFormRef.validate((valid) => {
      if (valid) {
        saveReplenishData(this.missFormModel).then(res => {
          this.dataTable.refresh();
          Message.success("增加成功");
        }).catch(err => {
          Message.error("增加失败")
        }).finally(() => {
          this.loading = false;
          this.dialogFormVisible = false;
        })
      } else {
        return false;
      }
    });
  }

  onSearch(): void {
    this.dataTable.refresh();
  }

  mounted() {
    //获取调查类别列表
    getMinCategory().then(res => {
      if (res.data) {
        this.minCategoryList = res.data
      }
    });
    //查询下级区划
    queryUserSubArea().then(res => {
      if (res.data) {
        this.subAreaList = res.data
      }
    })
  }

  activated() {
    this.onSearch()
  }
}
</script>
<style lang="scss" scoped>
.verifyDataList {
  display: flex;
  gap: 10px;

  .ha-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.data-query-button {
  position: absolute;
  right: 20px;
}

/* 子 Dialog 提升层级 */
.child-dialog {
  z-index: 2001 !important; /* 必须高于父级 */
  .el-form-item {
    .el-form-item__label {
      width: 15%;
      text-align: left;
    }

    .el-select {
      width: 50%;
    }

    .el-input {
      width: 50%;
    }
  }
}
</style>
